import React, { Component } from 'react'
import { movieToolbar } from '../../config/movie.toolbar'


class Toolbars extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 0,
      district: 0,
      times: 0
    }
  }

  changeItem = (type, value) => {
    switch (type) {
      case 'type':
        this.setState({
          type: value
        })
        break;
      case 'district':
        this.setState({
          district: value
        })
        break;
      case 'times':
        this.setState({
          times: value
        })
        break;
    }

  }

  render() {
    const { condition } = movieToolbar;
    const { type, district, times } = this.state

    return (
      <div className="toolbar_cont">
        {
          condition.map((item, index) => {
            return <div className="tool_item">
              <span className="item_label">{item.name}</span>
              <div className="tools_item_chs">
                {item.children.map((chsItem, chsIndex) => {
                  return <div onClick={() => this.changeItem(item.value, chsIndex)} className={`chs_item ${this.state[item.value] == chsIndex ? 'active' : null}`}>{chsItem}</div>
                })}
              </div>
            </div>
          })
        }
      </div>
    )
  }

}

export default Toolbars